<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../common.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Project Infor</title>
    <link href="${ctx}/resources/css/project/project.css" rel="stylesheet">
    <link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="${ctx}/resources/js/jquery/jquery-1.12.0.min.js"></script>
    <script src="${ctx}/resources/js/bootstrap/bootstrap.min.js"></script>
    <script src="${ctx}/resources/js/art/art-template.js"></script>
    <c:set var="active" value="jobs"/>
    <%@include file="../common/head.jsp"%>
</head>
<body>


<div class="p10 bg-fff">
    <div class="ant-breadcrumb">
            <span>
                <span class="ant-breadcrumb-link ">首页</span>
                <span class="ant-breadcrumb-separator">/</span>
            </span>
            <span>
                <a class="ant-breadcrumb-link" href="${ctx}/project/list">项目列表</a>
                <span class="ant-breadcrumb-separator">/</span>
            </span>
            <span >
                <a class="ant-breadcrumb-link" href="${ctx}/version/list?projId=${project.id}">${project.projName}-列表</a>
                <span class="ant-breadcrumb-separator" >/</span>
            </span>
            <span >
                <span class="ant-breadcrumb-link">${version.version}</span>
                <span class="ant-breadcrumb-separator" >/</span>
            </span>
    </div>
</div>

<div class="container-solid">

    <div class="p20">
        <div class="bg-fff">
        <ul class="ant-menu ant-menu-horizontal  ant-menu-light ant-menu-root">
            <li class="ant-menu-item-selected ant-menu-item" ><span>运行实例</span></li>
            <div class="p15 pr20">
                <a class="btn btn-sm btn-info pull-right" style="margin-left: 5px;" href="${ctx}/job/build?id=${version.id}">立即构建</a>
            </div>

        </ul>
        <%--<%@include file="nav.jsp"%>--%>
        <div class="p20">
                <table class="table table-striped table-hover  builds" style="margin-bottom:0">
                <thead>
                <tr>
                    <th>环境</th>
                    <th>节点数</th>
                    <th>状态</th>
                    <th>版本号</th>
                    <th>PodIp</th>
                    <th style="display: none">UUID</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="env_body">

                </tbody>
            </table>
        </div>


    <ul class="ant-menu ant-menu-horizontal  ant-menu-light ant-menu-root">
        <li class="ant-menu-item-selected ant-menu-item" ><span>构建历史</span></li>
    </ul>
    <div class="table-responsive p20">
        <table class="table table-striped table-hover  builds">
            <thead>
            <tr>
                <th>#</th>
                <th>版本号</th>
                <th>状态</th>
                <th>创建时间</th>
                <%--<th>UUID</th>--%>
                <th>日志</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="history">
            <c:forEach items="${jobs}" var="job" varStatus="jobStatus">
                <tr data-id="${job.id}" data-status="${job.jobStatus}">
                    <td class="status">	${jobStatus.index + 1}	</td>
                    <td class="build-link" id="item_${job.jobName}">	<a href="javascript:;" class="mirror_switcher"><strong>${job.commitName}</strong>	</a></td>
                    <td class="status">
                        <c:choose>
                            <c:when test="${job.buildStatus==0}">
                                <span class="label label-primary loading-spin">构建中&nbsp;</span>
                            </c:when>
                            <c:when test="${job.buildStatus==1}">
                                <span class="label label-success">构建结束&nbsp;</span>
                            </c:when>
                            <c:when test="${job.buildStatus==9}">
                                <span class="label label-danger">构建失败&nbsp;</span>
                            </c:when>
                            <c:otherwise>
                                <span class="label label-default">UNKNOW&nbsp;</span>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${job.testStatus==0}">
                                <span class="label label-primary loading-spin">发布中&nbsp;</span>
                            </c:when>
                            <c:when test="${job.testStatus==1}">
                                <span class="label label-success">发布结束&nbsp;</span>
                            </c:when>
                            <c:when test="${job.testStatus==9}">
                                <span class="label label-danger">发布失败&nbsp;</span>
                            </c:when>
                            <c:otherwise>
                                <span class="label label-default">未发布&nbsp;</span>
                            </c:otherwise>
                        </c:choose>
                        <c:choose>
                            <c:when test="${job.deployStatus==0}">
                                <span class="label label-primary loading-spin">发布中&nbsp;</span>
                            </c:when>
                            <c:when test="${job.deployStatus==1}">
                                <span class="label label-success">发布结束&nbsp;</span>
                            </c:when>
                            <c:when test="${job.deployStatus==9}">
                                <span class="label label-danger">发布失败&nbsp;</span>
                            </c:when>
                            <c:otherwise>
                                <span class="label label-default">未发布&nbsp;</span>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td class="duration"><fmt:formatDate value="${job.createAt}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>	</td>
                    <%--<td class="timestamp" >	<span><a name="${job.jobName}" id="${job.jobName}">${job.jobName}</a></span></td>--%>
                    <td ><a href="${ctx}/job/detail?id=${job.id}">日志</a></td>
                    <td class="status">
                            <%--<a href="${ctx}/job/test?id=${project.id}">test</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="${ctx}/job/deploy?id=${project.id}">deploy</a>--%>
                        <!--  button -->
                        <div class="btn-group">


                            <c:choose>
                                <c:when test="${job.jobStatus==0}">
                                    <span class="label label-success loading-spin">构建中</span>
                                    <script>
                                        var needfresh = 1;
                                    </script>
                                </c:when>
                                <c:when test="${job.jobStatus==1}">
                                    <button type="button" class="btn btn-secondary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        发布
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="javascript:;" onclick="deploy('${ctx}/job/doRun?type=TEST&id=${job.id}')">测试环境</a>
                                        <a class="dropdown-item cl-red" href="javascript:;" onclick="deploy('${ctx}/job/doRun?env=PRERELEASE&type=DEPLOY&id=${job.id}')">预发布环境</a>
                                        <a class="dropdown-item cl-red" href="javascript:;" onclick="deploy('${ctx}/job/doRun?env=NORMAL&type=DEPLOY&id=${job.id}')">生产环境</a>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <span class="label label-danger">构建失败</span>
                                </c:otherwise>
                            </c:choose>

                        </div>
                    </td>
                </tr>

                </c:forEach>
                </tbody>
            </table>
            <!--ul class="pagination">
                <li class="active">	<a href="#">1</a>	</li>
                <li class=""><a href="/projects/6?page=2" rel="next">2</a>	</li>
                <li class="">	<a href="/projects/6?page=3">3</a>	</li>
                <li class="">	<a href="/projects/6?page=4">4</a>	</li>
                <li class="">	<a href="/projects/6?page=5">5</a>	</li>
                <li class="disabled">	<a href="#">…</a>	</li>
                <li>	<a href="/projects/6?page=2" rel="next">Next ›</a>	</li>
                <li>	<a href="/projects/6?page=9">Last »</a>	</li>
            </ul-->
        </div>
    </div>
    </div>
</div>



<div id="modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="nodes" class="form-control-label">节点数:</label>
                        <input type="number" class="form-control" id="nodes" />
                        <input name="pid" type="hidden" class="form-control" id="pid" />
                        <input name="type" type="hidden" class="form-control" id="type" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="saveNode()">保存</button>
            </div>
        </div>
    </div>
</div>



<div id="modal-msg" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <p class="p20 tc">
                保存成功
            </p>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="TEST_env">
    <tr>
        <td>测试环境</td>
        <td id="TEST_nodes" class="replicas">{{ replicas }}</td>
        <td >

            {{ if status=='Running' }}
                <span class="label label-success">Running&nbsp;</span>
            {{ else if status=='Pending' }}
                <span class="label label-success">Pending&nbsp;</span>
            {{ else if status=='Succeeded' }}
                <span class="label label-success">Succeeded&nbsp;</span>
            {{ else if status=='Failed' }}
                <span class="label label-danger">Failed&nbsp;</span>
            {{ else if status=='Unknown' }}
                <span class="label label-danger">Unknown&nbsp;</span>
            {{ else }}
                <span class="label label-danger">Error&nbsp;</span>
            {{ /if }}
        </td>
        <td><a href="#">{{ version }}</a></td>
        <td>{{#podIp}}</td>
        <td style="display: none"><a href="#{{ uuid }}">{{ uuid }}</a></td>
        <td>
            <button class="btn btn-sm btn-info" data-id="${job.id}" data-type="TEST" onclick="changeNodes(this)">配置</button>&nbsp;&nbsp;
            <a class="btn btn-sm btn-danger" href="javascript:;" onclick="stopService('TEST',${version.id})">停止运行</a>
        </td>
    </tr>
</script>

<script type="text/html" id="PREPRODUCT_env">
    <tr>
        <td>预发布环境</td>
        <td id="PREPRODUCT_nodes" class="replicas">{{ replicas }}</td>
        <td>
            {{ if status=='Running' }}
            <span class="label label-success">Running&nbsp;</span>
            {{ else if status=='Pending' }}
            <span class="label label-success">Pending&nbsp;</span>
            {{ else if status=='Succeeded' }}
            <span class="label label-success">Succeeded&nbsp;</span>
            {{ else if status=='Failed' }}
            <span class="label label-danger">Failed&nbsp;</span>
            {{ else if status=='Unknown' }}
            <span class="label label-danger">Unknown&nbsp;</span>
            {{ else }}
            <span class="label label-danger">Error&nbsp;</span>
            {{ /if }}
        </td>
        <td><a href="#">{{ version }}</a></td>
        <td>{{#podIp}}</td>
        <td  style="display: none"><a href="#{{ uuid }}">{{ uuid }}</a></td>
        <td>
            <button class="btn btn-sm btn-info" data-type="PREPRODUCT" onclick="changeNodes(this)">配置</button>&nbsp;&nbsp;
            <a class="btn btn-sm btn-danger" href="javascript:;" onclick="stopService('PREPRODUCT',${version.id})">停止运行</a>
        </td>
    </tr>
</script>

<script type="text/html" id="PRODUCT_env">
    <tr>
        <td>正式环境</td>
        <td id="PRODUCT_nodes" class="replicas">{{ replicas }}</td>
        <td>
            {{ if status=='Running' }}
            <span class="label label-success">Running&nbsp;</span>
            {{ else if status=='Pending' }}
            <span class="label label-success">Pending&nbsp;</span>
            {{ else if status=='Succeeded' }}
            <span class="label label-success">Succeeded&nbsp;</span>
            {{ else if status=='Failed' }}
            <span class="label label-danger">Failed&nbsp;</span>
            {{ else if status=='Unknown' }}
            <span class="label label-danger">Unknown&nbsp;</span>
            {{ else }}
            <span class="label label-danger">Error&nbsp;</span>
            {{ /if }}
        </td>
        <td><a href="#">{{ version }}</a></td>
        <td>{{#podIp}}</td>
        <td  style="display: none"><a href="#{{ uuid }}">{{ uuid }}</a></td>
        <td>
            <button class="btn btn-sm btn-info" data-type="PRODUCT" onclick="changeNodes(this)">配置</button>&nbsp;&nbsp;
            <a class="btn btn-sm btn-danger" href="javascript:;" onclick="stopService('PRODUCT',${version.id})">停止运行</a>
        </td>
    </tr>
</script>


<script>
    var buildStatus = [],
        testStatus = [],
        deployStatus = [];
    <c:forEach items="${jobs}" var="job" varStatus="jobStatus">
        <c:if test="${job.buildStatus == 0}">
                buildStatus.push(${job.id});
        </c:if>
        <c:if test="${job.testStatus == 0}">
            testStatus.push(${job.id});
        </c:if>
        <c:if test="${job.deployStatus == 0}">
            deployStatus.push(${job.id});
        </c:if>
    </c:forEach>

    function getStatus(id,type){
        setInterval(function(){
            $.get("${ctx}/job/getLog",{type:type,id:id},function(json){
                if(json.data.jobStatus == 1 || json.data.jobStatus == 9){
                    location.reload();
                }
            },'json');
        },5000);
    }
    for(var i = 0 ;i < buildStatus.length ; i ++){
        getStatus(buildStatus[i],'BUILD');
    }
    for(var i = 0 ;i < testStatus.length ; i ++){
        getStatus(testStatus[i],'TEST');
    }
    for(var i = 0 ;i < deployStatus.length ; i ++){
        getStatus(deployStatus[i],'DEPLOY');
    }


    function initService(){
        var id = ${version.id};
        queryService(id,"TEST");
        queryService(id,"PRODUCT");
        queryService(id,"PREPRODUCT");
    }
    initService();

    function queryService(id,type,namespace){
        $.post("${ctx}/version/queryService",{
            id : id,
            type : type
        },function(json){
            if(json.data){
                $("#env_body").append( template(type+"_env",json.data) );


                var tag = '';

                if(type=="TEST"){
                    tag = '&nbsp;&nbsp;<span class="label label-success">测试环境&nbsp;</span>';
                }else if(type=="PRODUCT"){
                    tag = '&nbsp;&nbsp;<span class="label label-info">正式环境&nbsp;</span>';
                }else{
                    tag = '&nbsp;&nbsp;<span class="label label-info">预发布环境&nbsp;</span>';
                }

                $("#item_"+json.data.uuid).append(tag).parents("tr").css({"background":"rgba(247, 255, 188, 0.83)"});
            }
        },'json');
    }


    function changeNodes(ele){
        var $ele = $(ele);
        var pid = $ele.data("id");
        var type = $ele.data("type");
        $("#modal").modal("show");
        $("#pid").val( pid );
        $("#type").val( type );
        $("#nodes").val( $ele.parents("tr").find(".replicas").text());
        setTimeout(function(){
            $("#nodes").select();
            console.debug('select');
        },500);
    }

    function saveNode(){
        var pid = $("#pid").val();
        var type = $("#type").val();
        var nodes = $("#nodes").val();

        $("#"+type+"_nodes").text( nodes );
        $("#modal").modal("hide");

        $.post("${ctx}/version/scale",{
            id : "${version.id}",
            type : type,
            instance : nodes
        },function(data){
            $("#"+type+"_nodes").text( nodes );
            $("#modal").modal("hide");
        });
    }

    function stopService(type,id){
        $.get("${ctx}/version/stopService",{type:type,id:id},function(json){
            if(json.code == 0){
                $("#modal-msg").modal("show");
                setTimeout(function(){
                    $("#modal-msg").modal("hide");
                },2000);
            }
        },'json');
    }

    function deploy(url){
        $.get(url,function(json){
            if(json.code == 0){
                location.reload();
            }
        },'json');
    }

</script>
</html>
